{{#>base title=data.page.datatables}}

{{#*inline "pageContent"}}
    <div class="row">
        <div class="col-md-12">
            <h3 class="page-title">
                {{data.page.datatables}}
            </h3>

            <div class="tabs-wrap">
                <ul  class="nav nav-tabs">
                    <li>
                        <a href="datatable.html" >基础 </a>
                    </li>
                    <li>
                        <a href="datatable-extend.html" >细分</a>
                    </li>
                    <li  class="active">
                        <a href="datatable-summary.html" >汇总</a>
                    </li>
                    <li>
                        <a href="datatable-search.html" >搜索</a>
                    </li>
                    <li>
                        <a href="datatable-toolbar.html">工具栏</a>
                    </li>
                    <li>
                        <a href="datatable-options.html" >参数说明</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table id="my_table"></table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3>说明</h3>
            <ol>
                <li>在aoColumns中设置bShowSummary=true;</li>
                <li>在aoColumns中设置fnSummaryFormat,自定义一个函数，格式化显示的值，可选参数</li>

                <li>在 <a target="_blank" href="/test/api/keywords.json">keywords.json</a>
                    中返回summary信息;
                </li>
            </ol>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="markdown">

                <h3>HTML代码</h3>
<pre><code class="html">&lt;table id=&quot;my_table&quot;&gt;&lt;/table&gt;</code></pre>
                <h3>Javascript代码</h3>
<pre><code class="javascript">require('../../plugins/datatables/module');
$p.dataTable("#my_table", {
    "fnDataSource": model.getDataList,
    "sClass": "table-fixed",
    "aaSorting": [
        [2, "desc"]
    ],
    "fnParams": function() {
        return {};
    },
    "aoColumns": [{
        "bSortable": false,
        "mData": "keywords",
        "sTitle": "关键字"
    }, {
        "sTitle": "搜索引擎",
        "mData": "searchEngine"
    }, {
        "bShowSummary":true,
        "sClass": "t-a-r",
        "sTitle": "浏览量(PV)",
        "mData": "pageViews"
    }, {
        "sClass": "t-a-r",
        "bShowSummary":true,
        "fnSummaryFormat": function(value) {
            return value + ".00";
        },
        "sTitle": "独立访问者(UV)",
        "mData": "uniqueVisitors"
    }, {
        "sClass": "t-a-r",
        "bShowSummary":true,
        "sTitle": "访问次数(VV)",
        "mData": "visitViews"
    }]
});</code></pre>

                <h3>JSON 数据</h3>
                <a href="/test/api/keywords.json" target="_blank">keywords.json</a>

                <h3>基于版本</h3>
                <p>[v1.9.4]</p>

                <h3>更多实例</h3>

                <a href="http://legacy.datatables.net/examples/" target="_blank">
                    http://legacy.datatables.net/examples/
                </a>


            </div>


        </div>

    </div>
{{/inline}}

{{#*inline "appScript"}}
    <script type="text/javascript">
        pagurian.call("modules/datatable/app", function(app) {
            app.page.dataTableSummary();
        });
    </script>
{{/inline}}

{{/base}}
